<template>
	<view>
		<view class="content">
			<view class="logo_box">
				<view style="text-align: center;line-height: 350upx;font-size: 100upx;">我是logo</view>
			</view>
			<view class="input_box">
				<view class="cu-form-group">
					<view class="title">账号</view>
					<input  placeholder="请输入账号" name="input" v-model="username"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">密码</view>
					<input password="true" placeholder="请输入密码" name="input" v-model="password1"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">确认密码</view>
					<input password="true" placeholder="请重新输入密码" name="input" v-model="password2"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">手机号码</view>
					<input placeholder="请输入手机号码" name="input" v-model="phone"></input>
					<view class="cu-capsule radius">
						<view class='cu-tag bg-blue '>
							+86
						</view>
						<view class="cu-tag line-blue">
							中国大陆
						</view>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">验证码</view>
					<input placeholder="请输入验证码" name="input"></input>
					<button class='cu-btn bg-green shadow'>验证码</button>
				</view>
			</view>
			<view class="bottom_box">
				<view class="aaaaa">
					<view class="login_bottom">
						<button size="default" type="primary" form-type="submit" @tap="regist">注册</button>
					</view>
				</view>
				<view>
					<view class="login_bottom">
						<button size="default" type="default" form-type="submit" @tap="backLoginPage">返回</button>
					</view>
				</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	import {
		mapState,mapMutations
	}from 'vuex'
	export default {
		computed:{
			...mapState(['webUrl']),
		},
		data() {
			return {
				username:'',
				password1:'',
				password2:'',
				phone:''
			};
		},
		methods:{
			backLoginPage(){
				uni.navigateTo({
					url:"../home/home"
				})
			},
			regist(){
				const user = this.username;
				const pass1 = this.password1;
				const pass2 = this.password2;
				
				if(user.length < 5){
					uni.showToast({
					    icon: 'none',
					    title: '账号最短为 5 个字符'
					});
					return;
				}
				if(pass1.length <6 || pass2.length <6){
					uni.showToast({
					    icon: 'none',
					    title: '密码最短为 6 个字符'
					});
					return;
				}
				if(pass1 != pass2){
					uni.showToast({
						title:"两次密码不一致",
						icon:"none"
					});
					return;
				}
				uni.showLoading({
					title:"加载中"
				})
				uni.request({
					url:this.webUrl+'regist',
					method:'POST',
					header:{
						'Content-Type': 'application/x-www-form-urlencoded' 
					},
					data:{
						username : user,
						password : pass1
					},
					success(res) {
						if(res.data.status == 0){
							uni.showToast({
								title:"注册成功",
								icon:"success"
							});
							uni.redirectTo({
								url:"../home/home"
							})
							return;
						}
						if(res.data.status == 1){
							uni.showToast({
								title:"用户名已存在",
								icon:"none"
							});
							return;
						}
					}
				})
			}
		}
	}
</script>

<style lang="stylus">
	.content {
		.logo_box {
			
			width: 100%;
			height: 350upx;
			background-color: #0081FF;
		}
		.input_box {
			width: 100%;
			height: 500upx;
			background-color: #ffffff;
			.m_input {
				display: flex;
				height: 100upx;
				
				.input_text {
					text-align: center;
					line-height: 125upx;
					font-size: 31upx;
					width: 27%;
				}
				.input_value {
					margin-top: 30upx;
					margin-left: 0upx;
					width: 70%;
					
				}
				
			}
		}
		.bottom_box {
			display:flex;
			width: 100%;
			height: 200upx;
			margin-top: 20upx;
			flex-direction: column;
				.login_bottom {
					margin-top: 10upx;
					padding-left:200upx;
					padding-right:200upx;
				}
				.regist_bottom {
					margin-top: 10upx;
					padding-left:200upx;
					padding-right:200upx;
				}
		}
	}
</style>
